/**
* 基础菜单 商品管理
*/
<template>
  <div>
    <!-- 面包屑导航 -->
    <el-breadcrumb separator-class="el-icon-arrow-right">
      <el-breadcrumb-item :to="{ path: '/' }">首页</el-breadcrumb-item>
      <el-breadcrumb-item>结构化文件</el-breadcrumb-item>
    </el-breadcrumb>
<!--    一个大大框 -->
    <div class="container">
      <h1>结构化数据源列表</h1>
    </div>
<!--小小按钮-->
    <el-form :inline="true" :model="formInline" class="user-search">
      <el-form-item>
        <el-button size="small" type="primary" icon="el-icon-plus" @click="handleEdit()">添加</el-button>
      </el-form-item>
    </el-form>
    <!--列表-->
    <el-table size="small" :data="listData" highlight-current-row v-loading="loading" border element-loading-text="拼命加载中" style="width: 100%;">
      <el-table-column align="center" v-if="false" type="selection" width="60">
      </el-table-column>
      <el-table-column sortable prop="dataTable" label="数据源名称" width="200">
      </el-table-column>
      <el-table-column sortable prop="datastore" label="数据源" width="150">
      </el-table-column>

      <el-table-column sortable prop="url" label="ip" width="200">
      </el-table-column>
<!--      <el-table-column sortable prop="port" label="端口" width="100">-->
<!--      </el-table-column>-->
<!--      <el-table-column sortable prop="user" label="用户" width="100">-->
<!--      </el-table-column>-->
<!--      <el-table-column sortable prop="pwd" label="密码" width="100">-->
<!--      </el-table-column>-->
      <el-table-column sortable prop="fileds" label="字段" width="100">
      </el-table-column>
      <el-table-column align="center" label="操作" min-width="200">
        <template slot-scope="scope">

          <el-button size="mini" type="success" @click="lookdetail(scope.$index, scope.row)">查看详情</el-button>
          <el-button size="mini" type="danger" @click="handleEdit(scope.$index, scope.row)">修改</el-button>
<!--          <el-button size="mini" type="danger" @click="deleteUser(scope.$index, scope.row)">删除</el-button>-->
        </template>
      </el-table-column>
    </el-table>
    <!-- 分页组件 -->
    <Pagination v-bind:child-msg="pageparm" @callFather="callFather"></Pagination>
    <el-dialog title="展示" :visible.sync="isShowDataabcdefg" width="60%" @click="closeDialog">
      <el-form label-width="300px" :model="editForm"  ref="editForm">
<!--        {{this.showDataSource}}-->

        <li v-for="(item,index) in this.showDataSource">{{item}}<hr></li>


      </el-form>
    </el-dialog>
    <!-- 编辑界面 -->
    <el-dialog :title="title" :visible.sync="editFormVisible" width="30%" @click="closeDialog">
      <el-form label-width="120px" :model="editForm"  ref="editForm">
        <el-form-item label="数据源链接" prop="deptName">
          <el-input size="mini" v-model="editForm.url" auto-complete="off" placeholder="url" @blur="lossFocus"></el-input>
        </el-form-item>
        <el-form-item label="数据源端口" prop="deptNo">
          <el-input size="mini" v-model="editForm.port" auto-complete="off" placeholder="port" @blur="lossFocus"></el-input>
        </el-form-item>
        <el-form-item label="用户" prop="deptNo">
          <el-input size="mini" v-model="editForm.user" auto-complete="off" placeholder="user" @blur="lossFocus"></el-input>
        </el-form-item>
        <el-form-item label="密码" prop="deptNo">
          <el-input size="mini" show-password v-model="editForm.pwd" auto-complete="off" placeholder="密码" @blur="lossFocus"></el-input>
        </el-form-item>
        <el-form-item label="数据源" prop="deptNo">
          <el-input size="mini" v-model="editForm.datastore" auto-complete="off" placeholder="" @blur="lossFocus"></el-input>
        </el-form-item>
        <el-form-item label="数据表" prop="deptNo">
<!--          <el-input size="mini" v-model="editForm.dataTable" auto-complete="off" placeholder=""></el-input>-->
          <el-select size="mini" v-model="editForm.dataTable" @change="TableChange" placeholder="请选择">
            <el-option
              v-for="item in Tableoptions"
              :key="item.value"
              :label="item.label"
              :value="item.value">
            </el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="字段" prop="deptNo">
<!--          <el-input size="mini" v-model="editForm.fileds" auto-complete="off" placeholder=""></el-input>-->
          <el-select size="mini" multiple v-model="editForm.fileds_list" @change="TestChange" placeholder="请选择">
            <el-option
              v-for="item in filedoptions"
              :key="item.value"
              :label="item.label"
              :value="item.value">
            </el-option>
          </el-select>
        </el-form-item>

      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button size="small" @click="closeDialog">取消</el-button>
        <el-button size="small" type="primary" :loading="loading" class="title" @click="submitForm('editForm')">保存</el-button>
      </div>
    </el-dialog>
    <br/> <br/> <br/> <br/> <br/> <br/>
    <br/> <br/> <br/> <br/> <br/> <br/>
    <br/> <br/> <br/> <br/> <br/> <br/>
    <br/> <br/> <br/> <br/> <br/> <br/>
    <hr/>

  </div>
</template>

<script>
import { deptList, deptSave, deptDelete } from '../../api/userMG'
import Pagination from '../../components/Pagination'
import axios from "axios";
export default {
  data() {
    return {
      isShowDataabcdefg:false,
      showDataSource:[],
      Tableoptions:[],
      filedoptions:[],
      options: [{
        value: '选项1',
        label: '黄金糕'
      }, {
        value: '选项2',
        label: '双皮奶'
      }, {
        value: '选项3',
        label: '蚵仔煎'
      }, {
        value: '选项4',
        label: '龙须面'
      }, {
        value: '选项5',
        label: '北京烤鸭'
      }],
      nshow: true, //switch开启
      fshow: false, //switch关闭
      loading: false, //是显示加载
      editFormVisible: false, //控制编辑页面显示与隐藏
      title: '添加',
      editForm: {
        id: '',
        url: '',
        port: '',
        user: '',
        pwd: '',
        datastore: '',
        dataTable: '',
        fileds_list: [],
        fileds: ''
        // fileds: '',
      },
      // rules表单验证
      rules: {
        deptName: [
          { required: true, message: '请输入部门名称', trigger: 'blur' }
        ],
        deptNo: [{ required: true, message: '请输入部门代码', trigger: 'blur' }]
      },
      formInline: {
        page: 1,
        limit: 10,
        varLable: '',
        varName: '',
        token: localStorage.getItem('logintoken')
      },
      // 删除部门
      seletedata: {
        ids: '',
        token: localStorage.getItem('logintoken')
      },
      userparm: [], //搜索权限
      listData: [], //用户数据
      // 分页参数
      pageparm: {
        currentPage: 1,
        pageSize: 10,
        total: 10
      }
    }
  },
  // 注册组件
  components: {
    Pagination,

  },
  /**
   * 数据发生改变
   */

  /**
   * 创建完毕
   */
  created() {
    var data1 = localStorage.getItem('userName');
    var data2 = localStorage.getItem('pwd');
    var userId = localStorage.getItem('userId');

    this.getdata(this.formInline)
    console.log(this.$global.javaUrl)
  },

  /**
   * 里面的方法只有被调用才会执行
   */
  methods: {
    TestChange(){
      console.log(this.editForm.fileds)
    },
    TableChange(){
      console.log(this.editForm.dataTable)
      let url = this.$global.javaUrl + "/dataSource/getTableFields"
      let config = {
        headers: {
          'Content-Type': 'multipart/form-data',
          'user' : localStorage.getItem('userId')
        }
      }
      axios.get(url,{
        headers:
          {
            'user' : localStorage.getItem('userId')
          },
        params:
          {
            url:this.editForm.url,
            port:this.editForm.port,
            user:this.editForm.user,
            pwd:this.editForm.pwd,
            datastore: this.editForm.datastore,
            dataTable: this.editForm.dataTable
          }
      }).then(res=>{
        if(res.status == 200){
          console.log("返回信息")
          console.log(res)
          var list_data = res.data.data.fields
          this.filedoptions = []
          for(var i = 0; i < list_data.length; i++){
            this.filedoptions[i] = {label:list_data[i],value:list_data[i]}
          }
        }else{

        }
      })
    },
    lookdetail(in1, in2){
      let url = this.$global.javaUrl + "/dataSource/detail"
      let config = {
        headers: {
          'Content-Type': 'multipart/form-data',
          'user' : localStorage.getItem('userId')
        }
      }
      axios.get(url,{
        headers:
          {
            'user' : localStorage.getItem('userId')
          },
        params:
          {
            datasourceId:in2.id,
            pageSize:10,
            pageNum:1
          }
      }).then(res=>{
        console.log("22222"+in2.id)
        this.isShowDataabcdefg = true
        this.showDataSource = res.data.data.mapList
      })
    } ,
    lossFocus(){
      console.log(this.editForm)
      if(this.editForm.url != undefined
        && this.editForm.port != undefined
        && this.editForm.user != undefined
        && this.editForm.pwd != undefined){ //条件满足，获取table信息
        console.log("满足条件---")
        let url = this.$global.javaUrl + "/dataSource/getTables"
        let config = {
          headers: {
            'Content-Type': 'multipart/form-data',
            'user' : localStorage.getItem('userId')
          }
        }
        axios.get(url,{
          headers:
            {
              'user' : localStorage.getItem('userId')
            },
          params:
            {
              url:this.editForm.url,
              port:this.editForm.port,
              user:this.editForm.user,
              pwd:this.editForm.pwd,
              datastore: this.editForm.datastore
            }
        }).then(res=>{
          if(res.status == 200){
            console.log("返回信息")
            console.log(res.data.data.tables)
            var list_data = res.data.data.tables
            this.Tableoptions = []
            for(var i = 0; i < list_data.length; i++){
              this.Tableoptions[i] = {label:list_data[i],value:list_data[i]}
            }
          }else{

          }
        }).catch(err=>{
          this.$message.error('链接信息不正确')
        })

      }
    },
    // 获取公司列表
    getdata(parameter) {
      console.log("用户id")
      console.log(localStorage.getItem('userId'))
      this.logining = true
      // 测试通道，不为空直接登录
      //登录
      let url = this.$global.javaUrl + "/dataSource/list"
      let config = {
        headers: {
          'Content-Type': 'multipart/form-data',
          'user' : localStorage.getItem('userId')
        }
      }
      axios.get(url,{
        headers:
          {
            'user' : localStorage.getItem('userId')
          },
        params:
          {
            pageNum: this.formInline.page,
            pageSize:this.formInline.limit,
          }
      }).then(res=>{

        console.log("返回信息")
        console.log(res)
        this.listData = res.data.data.rows
        this.pageparm.currentPage = this.formInline.page
        this.pageparm.pageSize = this.formInline.limit
        this.pageparm.total = res.data.data.records
      })
      // this.loading = true
      // // 模拟数据开始
      // let res = {
      //   code: 0,
      //   msg: null,
      //   count: 5,
      //   data: [
      //     {
      //       addUser: null,
      //       editUser: null,
      //       addTime: 1521062371000,
      //       editTime: 1526700200000,
      //       deptId: 2,
      //       deptName: '数据源名字444444444',
      //       deptNo: '1',
      //       parentId: 1
      //     },
      //     {
      //       addUser: null,
      //       editUser: null,
      //       addTime: 1521063247000,
      //       editTime: 1526652291000,
      //       deptId: 3,
      //       deptName: '数据源名字1111111111111',
      //       deptNo: '02',
      //       parentId: 1
      //     },
      //     {
      //       addUser: null,
      //       editUser: null,
      //       addTime: 1526349555000,
      //       editTime: 1526349565000,
      //       deptId: 12,
      //       deptName: '数据源名字3333333',
      //       deptNo: '11',
      //       parentId: 1
      //     },
      //     {
      //       addUser: null,
      //       editUser: null,
      //       addTime: 1526373178000,
      //       editTime: 1526373178000,
      //       deptId: 13,
      //       deptName: '数据源名字222222222',
      //       deptNo: '5',
      //       parentId: 1
      //     },
      //     {
      //       addUser: null,
      //       editUser: null,
      //       addTime: 1526453107000,
      //       editTime: 1526453107000,
      //       deptId: 17,
      //       deptName: '数据源名字11111111',
      //       deptNo: 'v',
      //       parentId: 1
      //     }
      //   ]
      // }
      // this.loading = false
      // this.listData = res.data
      // this.pageparm.currentPage = this.formInline.page
      // this.pageparm.pageSize = this.formInline.limit
      // this.pageparm.total = res.count
      // 模拟数据结束

      /***
       * 调用接口，注释上面模拟数据 取消下面注释
       */
      // deptList(parameter)
      //   .then(res => {
      //     this.loading = false
      //     if (res.success == false) {
      //       this.$message({
      //         type: 'info',
      //         message: res.msg
      //       })
      //     } else {
      //       this.listData = res.data
      //       // 分页赋值
      //       this.pageparm.currentPage = this.formInline.page
      //       this.pageparm.pageSize = this.formInline.limit
      //       this.pageparm.total = res.count
      //     }
      //   })
      //   .catch(err => {
      //     this.loading = false
      //     this.$message.error('菜单加载失败，请稍后再试！')
      //   })
    },
    // 分页插件事件
    callFather(parm) {
      this.formInline.page = parm.currentPage
      this.formInline.limit = parm.pageSize
      this.getdata(this.formInline)
    },
    // 搜索事件
    search() {
      this.getdata(this.formInline)
    },
    //显示编辑界面
    handleEdit: function(index, row) {
      this.editFormVisible = true
      if (row != undefined && row != 'undefined') {
        this.title = '修改'
        this.editForm.url = row.url
        this.editForm.id = row.id
        this.editForm.port = row.port
        this.editForm.user = row.user
        this.editForm.pwd = row.pwd
        this.editForm.datastore = row.datastore
        this.editForm.dataTable = row.dataTable
        this.editForm.fileds = row.fileds
        this.editForm.fileds_list = row.fileds.split(",")
        this.TableChange()
        this.lossFocus()
      } else {
        this.title = '添加'
        this.editForm = {}
      }
    },
    // 编辑、增加页面保存方法
    submitForm(editData) {
      if(this.editForm.id != null){//update操作
        this.editForm.fileds = this.editForm.fileds_list.join(",")
        let url = this.$global.javaUrl + "/dataSource/saveOrUpdate"
        let config = {
          headers: {
            'user': localStorage.getItem('userId')
          }
        }
        axios.post(url, this.editForm, config).then(res => {
          console.log("测试更新功能")
          console.log(res)
          this.$message({
            type: 'success',
            message: '更新成功!'
          })
          this.editFormVisible = false
          this.getdata(this.formInline)
        })
      }else {//add操作

        this.editForm.fileds = this.editForm.fileds_list.join(",")
        let url = this.$global.javaUrl + "/dataSource/saveOrUpdate"
        let config = {
          headers: {
            'user': localStorage.getItem('userId')
          }
        }
        axios.post(url, this.editForm, config).then(res => {
          console.log("测试添加功能")
          console.log(res)
          this.$message({
            type: 'success',
            message: '添加成功!'
          })
          this.editFormVisible = false
          this.getdata(this.formInline)
        })

      }

      // old_data
      // this.$refs[editData].validate(valid => {
      //   if (valid) {
      //     deptSave(this.editForm)
      //       .then(res => {
      //         this.editFormVisible = false
      //         this.loading = false
      //         if (res.success) {
      //           this.getdata(this.formInline)
      //           this.$message({
      //             type: 'success',
      //             message: '公司保存成功！'
      //           })
      //         } else {
      //           this.$message({
      //             type: 'info',
      //             message: res.msg
      //           })
      //         }
      //       })
      //       .catch(err => {
      //         this.editFormVisible = false
      //         this.loading = false
      //         this.$message.error('公司保存失败，请稍后再试！')
      //       })
      //   } else {
      //     return false
      //   }
      // })
    },
    // 删除公司
    deleteUser(index, row) {
      this.$confirm('确定要删除吗?', '信息', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      })
        .then(() => {
          deptDelete(row.deptId)
            .then(res => {
              if (res.success) {
                this.$message({
                  type: 'success',
                  message: '公司已删除!'
                })
                this.getdata(this.formInline)
              } else {
                this.$message({
                  type: 'info',
                  message: res.msg
                })
              }
            })
            .catch(err => {
              this.loading = false
              this.$message.error('公司删除失败，请稍后再试！')
            })
        })
        .catch(() => {
          this.$message({
            type: 'info',
            message: '已取消删除'
          })
        })
    },
    // 关闭编辑、增加弹出框
    closeDialog() {
      this.editFormVisible = false
    }
  }
}
</script>

<style scoped>
.user-search {
  margin-top: 20px;
}
.userRole {
  width: 100%;
}
.container {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 10vh; /* 或者设置一个固定高度 */
}

</style>


